<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            height: 400px;
            width: 500px;
            background-color: green;
            margin: 0 auto;
            overflow: auto;
        }
        .content{
         margin: 20px;
         background-color: red;
         /* height: 2000px; */
         transform: translateX(200);
        }
    </style>
</head>
<body>
    <div class="tools">
        <button id="b1">set头</button>
        <button id="b2">set中</button>
        <button id="b3">set底部</button>
    </div>
    <div id="app">
        <div id="warp" class="content"></div>
    </div>
    <script type="module">
        import {h,patch} from "./h.js"
        window.hi=(target)=>{
            console.warn("target",target)
        },
        window.show=(e)=>{
            console.warn("event",e)
            e.stopPropagation();
            // 阻止事件的默认行为
            event.preventDefault();
        }
        warp.innerHTML=Array.from({length:1000},(v,i)=>`<h1 onclick="hi(this)">${i+1} item123 <a onclick="show(event)">${i}</a></h1>`).join("");

        app.addEventListener("scroll",e=>{
            console.warn(e.target.scrollTop,e.target.scrollLeft,e)
        })
        b1.addEventListener("click",()=>{
            app.scroll({
                top:0,
                // behavior:"smooth"
            })
        })
        b2.addEventListener("click",()=>{
            app.scroll({
                top:app.scrollHeight/2,
                // behavior:"smooth"
            })
        })
        b3.addEventListener("click",()=>{
            app.scroll({
                top:app.scrollHeight,
                // behavior:"smooth"
            })
        })
    </script>
</body>
</html>